Frontend arhitektura: heksagonalna in čista arhitektura za skalabilne aplikacije

Ker kompleksnost frontend aplikacij narašča, postane dobro definirana arhitektura ključna za vzdržljivost, testabilnost in skalabilnost. Dva priljubljena arhitekturna vzorca, ki naslavljata te skrbi, sta heksagonalna arhitektura (znana tudi kot "Ports and Adapters" - vrata in adapterji) in čista arhitektura. Čeprav izvirata iz sveta zalednih sistemov (backend), se lahko ta načela učinkovito uporabijo pri razvoju frontend aplikacij za ustvarjanje robustnih in prilagodljivih uporabniških vmesnikov.

Kaj je frontend arhitektura?

Frontend arhitektura opredeljuje strukturo, organizacijo in interakcije različnih komponent znotraj frontend aplikacije. Zagotavlja načrt za izgradnjo, vzdrževanje in skaliranje aplikacije. Dobra frontend arhitektura spodbuja:

• Vzdržljivost: Lažje razumevanje, spreminjanje in odpravljanje napak v kodi.
• Testabilnost: Omogoča lažje pisanje enotnih in integracijskih testov.
• Skalabilnost: Omogoča aplikaciji, da se spopada z naraščajočo kompleksnostjo in obremenitvijo uporabnikov.
• Ponovna uporabnost: Spodbuja ponovno uporabo kode v različnih delih aplikacije.
• Prilagodljivost: Prilagaja se spreminjajočim se zahtevam in novim tehnologijam.

Brez jasne arhitekture lahko frontend projekti hitro postanejo monolitni in težko obvladljivi, kar vodi do povečanih stroškov razvoja in zmanjšane agilnosti.

Uvod v heksagonalno arhitekturo

Heksagonalna arhitektura, ki jo je predlagal Alistair Cockburn, si prizadeva ločiti osrednjo poslovno logiko aplikacije od zunanjih odvisnosti, kot so baze podatkov, ogrodja za uporabniške vmesnike in API-ji tretjih oseb. To doseže s konceptom vrat in adapterjev (Ports and Adapters).

Ključni koncepti heksagonalne arhitekture:

• Jedro (domena): Vsebuje poslovno logiko in primere uporabe aplikacije. Je neodvisno od zunanjih ogrodij ali tehnologij.
• Vrata (Ports): Vmesniki, ki opredeljujejo, kako jedro komunicira z zunanjim svetom. Predstavljajo vhodne in izhodne meje jedra.
• Adapterji (Adapters): Implementacije vrat, ki povezujejo jedro s specifičnimi zunanjimi sistemi. Obstajata dve vrsti adapterjev:
• Gonilni adapterji (primarni adapterji): Sprožijo interakcije z jedrom. Primeri vključujejo komponente uporabniškega vmesnika, vmesnike ukazne vrstice ali druge aplikacije.
• Gnani adapterji (sekundarni adapterji): Kliče jih jedro za interakcijo z zunanjimi sistemi. Primeri vključujejo baze podatkov, API-je ali datotečne sisteme.

Jedro ne ve ničesar o specifičnih adapterjih. Z njimi komunicira samo preko vrat. Ta ločitev omogoča enostavno zamenjavo različnih adapterjev brez vpliva na osrednjo logiko. Na primer, lahko preklopite z enega ogrodja za uporabniški vmesnik (npr. React) na drugega (npr. Vue.js) s preprosto zamenjavo gonilnega adapterja.

Prednosti heksagonalne arhitekture:

• Izboljšana testabilnost: Osrednjo poslovno logiko je mogoče enostavno testirati v izolaciji, brez zanašanja na zunanje odvisnosti. Uporabite lahko lažne adapterje (mock adapters) za simulacijo delovanja zunanjih sistemov.
• Povečana vzdržljivost: Spremembe v zunanjih sistemih imajo minimalen vpliv na osrednjo logiko. To olajša vzdrževanje in razvoj aplikacije skozi čas.
• Večja prilagodljivost: Aplikacijo lahko enostavno prilagodite novim tehnologijam in zahtevam z dodajanjem ali zamenjavo adapterjev.
• Izboljšana ponovna uporabnost: Osrednjo poslovno logiko je mogoče ponovno uporabiti v različnih kontekstih s povezovanjem na različne adapterje.

Uvod v čisto arhitekturo

Čista arhitektura, ki jo je populariziral Robert C. Martin (stric Bob), je še en arhitekturni vzorec, ki poudarja ločevanje skrbi (separation of concerns) in razdruževanje. Osredotoča se na ustvarjanje sistema, ki je neodvisen od ogrodij, baz podatkov, uporabniškega vmesnika in katere koli zunanje agencije.

Ključni koncepti čiste arhitekture:

Čista arhitektura organizira aplikacijo v koncentrične plasti, pri čemer je najbolj abstraktna in ponovno uporabna koda v središču, najbolj konkretna in tehnološko specifična koda pa na zunanjih plasteh.

• Entitete (Entities): Predstavljajo osrednje poslovne objekte in pravila aplikacije. So neodvisne od zunanjih sistemov.
• Primeri uporabe (Use Cases): Opredeljujejo poslovno logiko aplikacije in kako uporabniki komunicirajo s sistemom. Orkestrirajo entitete za izvajanje specifičnih nalog.
• Vmesniški adapterji (Interface Adapters): Pretvarjajo podatke med primeri uporabe in zunanjimi sistemi. Ta plast vključuje predstavitelje (presenters), krmilnike (controllers) in prehode (gateways).
• Ogrodja in gonilniki (Frameworks and Drivers): Najbolj zunanja plast, ki vsebuje ogrodje uporabniškega vmesnika, bazo podatkov in druge zunanje tehnologije.

Pravilo odvisnosti v čisti arhitekturi določa, da so lahko zunanje plasti odvisne od notranjih plasti, notranje plasti pa ne morejo biti odvisne od zunanjih. To zagotavlja, da je osrednja poslovna logika neodvisna od zunanjih ogrodij ali tehnologij.

Prednosti čiste arhitekture:

• Neodvisnost od ogrodij: Arhitektura se ne zanaša na obstoj neke knjižnice programske opreme z obilico funkcij. To vam omogoča, da ogrodja uporabljate kot orodja, namesto da bi bili prisiljeni svoj sistem umestiti v njihove omejene okvire.
• Testabilnost: Poslovna pravila je mogoče testirati brez uporabniškega vmesnika, baze podatkov, spletnega strežnika ali katerega koli drugega zunanjega elementa.
• Neodvisnost od uporabniškega vmesnika: Uporabniški vmesnik je mogoče enostavno spremeniti, ne da bi spreminjali preostali del sistema. Spletni uporabniški vmesnik je mogoče zamenjati s konzolnim, ne da bi spreminjali katero koli poslovno pravilo.
• Neodvisnost od baze podatkov: Oracle ali SQL Server lahko zamenjate za Mongo, BigTable, CouchDB ali kaj drugega. Vaša poslovna pravila niso vezana na bazo podatkov.
• Neodvisnost od katere koli zunanje agencije: Pravzaprav vaša poslovna pravila preprosto ne vedo *ničesar* o zunanjem svetu.

Uporaba heksagonalne in čiste arhitekture pri razvoju frontend aplikacij

Čeprav sta heksagonalna in čista arhitektura pogosto povezani z razvojem zalednih sistemov, se njuna načela lahko učinkovito uporabijo tudi pri frontend aplikacijah za izboljšanje njihove arhitekture in vzdržljivosti. Poglejmo, kako:

1. Določite jedro (domeno)

Prvi korak je določitev osrednje poslovne logike vaše frontend aplikacije. To vključuje entitete, primere uporabe in poslovna pravila, ki so neodvisna od ogrodja uporabniškega vmesnika ali zunanjih API-jev. Na primer, v spletni trgovini bi jedro lahko vključevalo logiko za upravljanje izdelkov, nakupovalnih košaric in naročil.

Primer: V aplikaciji za upravljanje nalog bi lahko osrednja domena vsebovala:

• Entitete: Naloga, Projekt, Uporabnik
• Primeri uporabe: UstvariNalogo, PosodobiNalogo, DodeliNalogo, ZaključiNalogo, SeznamNalog
• Poslovna pravila: Naloga mora imeti naslov, naloge ni mogoče dodeliti uporabniku, ki ni član projekta.

2. Opredelite vrata in adapterje (heksagonalna arhitektura) ali plasti (čista arhitektura)

Nato opredelite vrata in adapterje (heksagonalna arhitektura) ali plasti (čista arhitektura), ki ločujejo jedro od zunanjih sistemov. V frontend aplikaciji bi to lahko vključevalo:

• Komponente UI (gonilni adapterji/ogrodja in gonilniki): komponente React, Vue.js, Angular, ki komunicirajo z uporabnikom.
• Odjemalci API (gnani adapterji/vmesniški adapterji): Storitve, ki pošiljajo zahteve na zaledne API-je.
• Shranjevanje podatkov (gnani adapterji/vmesniški adapterji): Lokalna shramba (Local storage), IndexedDB ali drugi mehanizmi za shranjevanje podatkov.
• Upravljanje stanja (vmesniški adapterji): Redux, Vuex ali druge knjižnice za upravljanje stanja.

Primer z uporabo heksagonalne arhitekture:

• Jedro: Logika upravljanja nalog (entitete, primeri uporabe, poslovna pravila).
• Vrata: TaskService (definira metode za ustvarjanje, posodabljanje in pridobivanje nalog).
• Gonilni adapter: Komponente React, ki uporabljajo TaskService za interakcijo z jedrom.
• Gnani adapter: Odjemalec API, ki implementira TaskService in pošilja zahteve na zaledni API.

Primer z uporabo čiste arhitekture:

• Entitete: Task, Project, User (čisti JavaScript objekti).
• Primeri uporabe: CreateTaskUseCase, UpdateTaskUseCase (orkestrirajo entitete).
• Vmesniški adapterji:
  • Krmilniki (Controllers): Obravnavajo uporabniški vnos iz UI.
  • Predstavitelji (Presenters): Formatirajo podatke za prikaz v UI.
  • Prehodi (Gateways): Komunicirajo z odjemalcem API.
• Ogrodja in gonilniki: Komponente React, odjemalec API (axios, fetch).

3. Implementirajte adapterje (heksagonalna arhitektura) ali plasti (čista arhitektura)

Sedaj implementirajte adapterje ali plasti, ki povezujejo jedro z zunanjimi sistemi. Poskrbite, da so adapterji ali plasti neodvisni od jedra in da jedro z njimi komunicira samo preko vrat ali vmesnikov. To vam omogoča enostavno zamenjavo različnih adapterjev ali plasti brez vpliva na osrednjo logiko.

Primer (heksagonalna arhitektura):

// Vrata TaskService
interface TaskService {
  createTask(taskData: TaskData): Promise;
  updateTask(taskId: string, taskData: TaskData): Promise;
  getTask(taskId: string): Promise;
}

// Adapter odjemalca API
class ApiTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise {
    // Pošlji API zahtevek za ustvarjanje naloge
  }

  async updateTask(taskId: string, taskData: TaskData): Promise {
    // Pošlji API zahtevek za posodobitev naloge
  }

  async getTask(taskId: string): Promise {
    // Pošlji API zahtevek za pridobitev naloge
  }
}

// Adapter komponente React
function TaskList() {
  const taskService: TaskService = new ApiTaskService();

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // Posodobi seznam nalog
  };

  // ...
}

Primer (čista arhitektura):

// Entitete
class Task {
  constructor(public id: string, public title: string, public description: string) {}
}

// Primer uporabe
class CreateTaskUseCase {
  constructor(private taskGateway: TaskGateway) {}

  async execute(title: string, description: string): Promise {
    const task = new Task(generateId(), title, description);
    await this.taskGateway.create(task);
    return task;
  }
}

// Vmesniški adapterji - Prehod
interface TaskGateway {
  create(task: Task): Promise;
}

class ApiTaskGateway implements TaskGateway {
  async create(task: Task): Promise {
    // Pošlji API zahtevek za ustvarjanje naloge
  }
}

// Vmesniški adapterji - Krmilnik
class TaskController {
  constructor(private createTaskUseCase: CreateTaskUseCase) {}

  async createTask(req: Request, res: Response) {
    const { title, description } = req.body;
    const task = await this.createTaskUseCase.execute(title, description);
    res.json(task);
  }
}

// Ogrodja in gonilniki - Komponenta React
function TaskForm() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const apiTaskGateway = new ApiTaskGateway();
  const createTaskUseCase = new CreateTaskUseCase(apiTaskGateway);
  const taskController = new TaskController(createTaskUseCase);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await taskController.createTask({ body: { title, description } } as Request, { json: (data: any) => console.log(data) } as Response);
  };

  return (
    

       setTitle(e.target.value)} />
       setDescription(e.target.value)} />
      <button type="submit">Ustvari nalogo</button>
    </form>
  );
}

</code>
</pre>

<h3>4. Implementirajte vbrizgavanje odvisnosti (Dependency Injection)</h3>

<p>Za nadaljnje ločevanje jedra od zunanjih sistemov uporabite vbrizgavanje odvisnosti, da jedru zagotovite adapterje ali plasti. To vam omogoča enostavno zamenjavo različnih implementacij adapterjev ali plasti brez spreminjanja kode jedra.</p>

<p><b>Primer:</b></p>

<pre>
<code>
// Vbrizgaj TaskService v komponento TaskList
function TaskList(props: { taskService: TaskService }) {
  const { taskService } = props;

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // Posodobi seznam nalog
  };

  // ...
}

// Uporaba
const apiTaskService = new ApiTaskService();
<TaskList taskService={apiTaskService} />
</code>
</pre>

<h3>5. Napišite enotne teste</h3>

<p>Ena ključnih prednosti heksagonalne in čiste arhitekture je izboljšana testabilnost. Z lahkoto lahko pišete enotne teste za osrednjo poslovno logiko, ne da bi se zanašali na zunanje odvisnosti. Uporabite lažne adapterje ali plasti (mock adapters) za simulacijo delovanja zunanjih sistemov in preverite, ali osrednja logika deluje po pričakovanjih.</p>

<p><b>Primer:</b></p>

<pre>
<code>
// Lažni TaskService
class MockTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: '1', ...taskData });
  }

  async updateTask(taskId: string, taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: taskId, ...taskData });
  }

  async getTask(taskId: string): Promise<Task> {
    return Promise.resolve({ id: taskId, title: 'Test Task', description: 'Test Description' });
  }
}

// Enotni test
describe('TaskList', () => {
  it('should create a task', async () => {
    const mockTaskService = new MockTaskService();
    const taskList = new TaskList({ taskService: mockTaskService });

    const taskData = { title: 'New Task', description: 'New Description' };
    const newTask = await taskList.handleCreateTask(taskData);

    expect(newTask.title).toBe('New Task');
    expect(newTask.description).toBe('New Description');
  });
});
</code>
</pre>

<h2>Praktični premisleki in izzivi</h2>

<p>Čeprav heksagonalna in čista arhitektura ponujata pomembne prednosti, obstajajo tudi nekateri praktični premisleki in izzivi, ki jih je treba upoštevati pri njuni uporabi v frontend razvoju:</p>

<ul>
 <li><b>Povečana kompleksnost:</b> Te arhitekture lahko povečajo kompleksnost kode, zlasti pri majhnih ali preprostih aplikacijah.</li>
 <li><b>Krivulja učenja:</b> Razvijalci se bodo morda morali naučiti novih konceptov in vzorcev za učinkovito implementacijo teh arhitektur.</li>
 <li><b>Prekomerno načrtovanje (Over-engineering):</b> Pomembno je, da se izognete prekomernemu načrtovanju aplikacije. Začnite s preprosto arhitekturo in postopoma dodajajte kompleksnost po potrebi.</li>
 <li><b>Uravnoteženje abstrakcije:</b> Iskanje prave ravni abstrakcije je lahko izziv. Preveč abstrakcije lahko oteži razumevanje kode, medtem ko premalo abstrakcije lahko vodi do tesne povezanosti.</li>
 <li><b>Premisleki o zmogljivosti:</b> Prekomerne plasti abstrakcije lahko potencialno vplivajo na zmogljivost. Pomembno je profilirati aplikacijo in identificirati morebitna ozka grla v zmogljivosti.</li>
</ul>

<h2>Mednarodni primeri in prilagoditve</h2>

<p>Načela heksagonalne in čiste arhitekture so uporabna pri razvoju frontend aplikacij ne glede na geografsko lokacijo ali kulturni kontekst. Vendar pa se lahko specifične implementacije in prilagoditve razlikujejo glede na zahteve projekta in preference razvojne ekipe.</p>

<p><b>Primer 1: Globalna platforma za e-trgovino</b></p>

<p>Globalna platforma za e-trgovino bi lahko uporabila heksagonalno arhitekturo za ločitev osrednje logike nakupovalne košarice in upravljanja naročil od ogrodja uporabniškega vmesnika in plačilnih prehodov. Jedro bi bilo odgovorno za upravljanje izdelkov, izračun cen in obdelavo naročil. Gonilni adapterji bi vključevali komponente React za katalog izdelkov, nakupovalno košarico in strani za zaključek nakupa. Gnani adapterji bi vključevali odjemalce API za različne plačilne prehode (npr. Stripe, PayPal, Alipay) in ponudnike pošiljanja (npr. FedEx, DHL, UPS). To platformi omogoča enostavno prilagajanje različnim regionalnim načinom plačila in možnostim pošiljanja.</p>

<p><b>Primer 2: Večjezična aplikacija za družbena omrežja</b></p>

<p>Večjezična aplikacija za družbena omrežja bi lahko uporabila čisto arhitekturo za ločitev osrednje logike za avtentikacijo uporabnikov in upravljanje vsebine od ogrodij za uporabniški vmesnik in lokalizacijo. Entitete bi predstavljale uporabnike, objave in komentarje. Primeri uporabe bi določali, kako uporabniki ustvarjajo, delijo in komunicirajo z vsebino. Vmesniški adapterji bi skrbeli za prevajanje vsebine v različne jezike in formatiranje podatkov za različne komponente uporabniškega vmesnika. To aplikaciji omogoča enostavno podporo novim jezikom in prilagajanje različnim kulturnim preferencam.</p>

<h2>Zaključek</h2>

<p>Heksagonalna in čista arhitektura zagotavljata dragocena načela za izgradnjo vzdrževalnih, testabilnih in skalabilnih frontend aplikacij. Z ločevanjem osrednje poslovne logike od zunanjih odvisnosti lahko ustvarite bolj prilagodljivo in prožno kodno bazo, ki jo je lažje razvijati skozi čas. Čeprav te arhitekture lahko na začetku dodajo nekaj kompleksnosti, so dolgoročne koristi v smislu vzdržljivosti, testabilnosti in skalabilnosti vredne naložbe pri kompleksnih frontend projektih. Ne pozabite začeti s preprosto arhitekturo in postopoma dodajati kompleksnost po potrebi ter skrbno pretehtati praktične vidike in izzive.</p>

<p>S sprejetjem teh arhitekturnih vzorcev lahko frontend razvijalci gradijo bolj robustne in zanesljive aplikacije, ki lahko zadovoljijo spreminjajoče se potrebe uporabnikov po vsem svetu.</p>

<h3>Dodatno branje</h3>

<ul>
  <li>Heksagonalna arhitektura: <a href="https://alistaircockburn.com/hexagonal-architecture/">https://alistaircockburn.com/hexagonal-architecture/</a></li>
  <li>Čista arhitektura: <a href="https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html">https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html</a></li>
</ul></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">frontend arhitektura</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">heksagonalna arhitektura</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">čista arhitektura</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">frontend razvoj</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">arhitektura programske opreme</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">skalabilne aplikacije</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">testabilna koda</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vzdrževalna koda</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI arhitektura</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">JavaScript arhitektura</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">TypeScript arhitektura</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>